<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<!-- Mirrored from www.zi-han.net/theme/hplus/index_v1.html?v=4.0 by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:20 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title>主页</title>

    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/indexCss/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/indexCss/animate.min.css" rel="stylesheet"> 
    <link href="css/indexCss/style.min862f.css?v=4.1.0" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<script type="text/javascript"> 
	
 		function findWeather() {
		  var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js';
		  $.getScript(cityUrl, function(script, textStatus, jqXHR) {
			var citytq = remote_ip_info.city ;// 获取城市
			var url = "http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&city=" + citytq + "&day=0&dfc=3";
			$.ajax({
			  url : url,
			  dataType : "script",
			  scriptCharset : "gbk",
			  success : function(data) {
				var _w = window.SWther.w[citytq][0];
				if(_w.t1==''&&_w.t2!=''){
						 var tq = "<h2 class='font-bold'>" + _w.t2 + "℃ "+"</h2>";
						 $('#weather').html(tq);
						 
					}else{
						if(_w.t1 > _w.t2){
							var tq = "<h2 class='font-bold'>"+_w.t2 + "℃～" + _w.t1 + "℃ "+"</h2>";
							$('#weather').html(tq);
						}else{
							var tq = "<h2 class='font-bold'>"+_w.t1 + "℃～" + _w.t2 + "℃ "+"</h2>";
							$('#weather').html(tq);
						}
					}
			  }
			});
		  });
		}
 
		findWeather(); 
		jQuery(document).ready(function($)
			{	
			// CPU Usage Gauge
				$("#cpu-usage-gauge").dxCircularGauge({
					scale: {
					startValue: 0,
					endValue: 100,
						majorTick: {
							tickInterval: 25
						}
					},
					rangeContainer: {
					palette: 'pastel',
					width: 3,
					ranges: [
					{ startValue: 0, endValue: 25, color: "#68b828" },
					{ startValue: 25, endValue: 50, color: "#68b828" },
					{ startValue: 50, endValue: 75, color: "#68b828" },
					{ startValue: 75, endValue: 100, color: "#d5080f" },
							],
					},
					value: 75,
					valueIndicator: {
					offset: 10,
					color: '#68b828',
					type: 'rectangleNeedle',
					spindleSize: 12
					}
					});
				//RAM Usage Gauge
				$("#ram-usage-gauge").dxCircularGauge({
					scale: {
					startValue: 0,
					endValue: 100,
						majorTick: {
							tickInterval: 25
						}
					},
					rangeContainer: {
					palette: 'pastel',
					width: 3,
					ranges: [
					{ startValue: 0, endValue: 25, color: "#68b828" },
					{ startValue: 25, endValue: 50, color: "#68b828" },
					{ startValue: 50, endValue: 75, color: "#68b828" },
					{ startValue: 75, endValue: 100, color: "#d5080f" },
							],
					},
					value: 50,
					valueIndicator: {
					offset: 10,
					color: '#68b828',
					type: 'rectangleNeedle',
					spindleSize: 12
					}
					});
					//HHD Usage Gauge
				$("#hhd-usage-gauge").dxCircularGauge({
					scale: {
					startValue: 0,
					endValue: 100,
						majorTick: {
							tickInterval: 25
						}
					},
					rangeContainer: {
					palette: 'pastel',
					width: 3,
					ranges: [
					{ startValue: 0, endValue: 25, color: "#68b828" },
					{ startValue: 25, endValue: 50, color: "#68b828" },
					{ startValue: 50, endValue: 75, color: "#68b828" },
					{ startValue: 75, endValue: 100, color: "#d5080f" },
							],
					},
					value: 30,
					valueIndicator: {
					offset: 10,
					color: '#68b828',
					type: 'rectangleNeedle',
					spindleSize: 12
					}
					});
			});
						
			function between(randNumMin, randNumMax)
			{
				var randInt = Math.floor((Math.random() * ((randNumMax + 1) - randNumMin)) + randNumMin);
				return randInt;
			}
</script>
    

</head>

<body class="gray-bg">
 <div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
				   <div class="col-sm-4">
						<div class="widget style1 navy-bg">
							<div class="row">
								<div class="col-xs-4">
									<i class="fa fa-cloud fa-5x"></i>
								</div>
						   
								<div class="col-xs-8 text-right">
									 <span> 今日温度 </span>
									 <div id="weather"></div>
								</div>
							 </div>
					  </div>
				  </div>
				  <div class="col-sm-4">
					   <div class="widget style1 yellow-bg">
							<div class="row">
								<div class="col-xs-4">
									  <i class="fa fa-music fa-5x"></i>
								</div>
								<div class="col-xs-8 text-right">
									   <span> 歌曲 </span>
									   <h2 class="font-bold">12</h2>
								</div>
							</div>
					  </div>
				  </div>
				  <div class="col-sm-4">
					   <div class="widget style1 navy-bg">
							<div class="row vertical-align">
								<div class="col-xs-3">
									  <i class="fa fa-user fa-5x"></i>
								</div>
								<div class="col-xs-9 text-right">
									  <span> 在线 </span>
									  <h2 class="font-bold">217</h2>
								</div>
							</div>
					   </div>
				</div>
	</div>
</div>
 <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
   			<div class="col-sm-4">
                <div class="contact-box">
					<!--文字 -->
					<div class="chart-label">
						<div id="network-mbs-packets" class="h1 text-secondary text-bold" data-count="this" data-from="0.00" data-to="75" data-suffix="%" data-duration="1.5">0.00%</div>
							<span class="text-small text-muted text-upper">CPU Usage</span>
							<p class="text-medium" style="width: 50%; margin-top: 10px">服务器CPU占用率越高,则服务器延迟就越高。</p>
					</div>
					<!-- 图标-->
					<div>
						<div id="cpu-usage-gauge" style="width: 180px; height: 160px; position: absolute; right: 10px; top: 20px"></div>
					</div>
                </div>
         	</div>
         <div class="col-sm-4">
                <div class="contact-box">
					<!--文字 -->
					<div class="chart-label">
						<div id="network-mbs-packets" class="h1 text-secondary text-bold" data-count="this" data-from="0.00" data-to="50" data-suffix="%" data-duration="1.5">0.00%</div>
							<span class="text-small text-muted text-upper">RAM Usage</span>
							<p class="text-medium" style="width: 50%; margin-top: 10px">服务器内存占用率越高,则服务器访问量就越大。</p>
					</div>
					<!-- 图标-->
					<div>
						<div id="ram-usage-gauge" style="width: 180px; height: 160px; position: absolute; right: 10px; top: 20px"></div>
					</div>
                </div>
           </div>
			<div class="col-sm-4">
                <div class="contact-box">
					<!--文字 -->
					<div class="chart-label">
						<div id="network-mbs-packets" class="h1 text-secondary text-bold" data-count="this" data-from="0.00" data-to="30" data-suffix="%" data-duration="1.5">0.00%</div>
							<span class="text-small text-muted text-upper">HHD Usage</span>
							<p class="text-medium" style="width: 50%; margin-top: 10px">服务器磁盘占用率越高,则读写能力就越底。</p>
					</div>
					<!-- 图标-->
					<div>
						<div id="hhd-usage-gauge" style="width: 180px; height: 160px; position: absolute; right: 10px; top: 20px"></div>
					</div>
                </div>
			</div>
          
        </div> 
</div>
	
	<script src="js/home_pageJs/resizeable.js"></script>
	<script src="js/home_pageJs/joinable.js"></script>
	<script src="js/home_pageJs/xenon-widgets.js"></script>
	<script src="js/home_pageJs/xenon-custom.js"></script>
	<script src="js/home_pageJs/globalize.min.js"></script>
	<script src="js/home_pageJs/dx.chartjs.js"></script>
</body>
